import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import storage from '@/utils/storage'
import utils from '@/utils/utils'
import API from '../api/index'

const routes = [
  {
    name: 'home',
    path: '/',
    meta: {
      title: '首页'
    },
    component: Home,
    redirect: '/welcome',
    children: [
      {
        name: 'welcome',
        path: '/welcome',
        meta: {
          title: '欢迎页'
        },
        component: () => import('@/views/Welcome.vue')
      },
      {
        name: 'user',
        path: '/system/user',
        meta: {
          title: '用户管理'
        },
        component: () => import('@/views/User.vue')
      },
      {
        name: 'menu',
        path: '/system/menu',
        meta: {
          title: '菜单管理'
        },
        component: () => import('@/views/Menu.vue')
      },
      {
        name: 'role',
        path: '/system/role',
        meta: {
          title: '角色管理'
        },
        component: () => import('@/views/Role.vue')
      },
      {
        name: 'dept',
        path: '/system/dept',
        meta: {
          title: '部门管理'
        },
        component: () => import('@/views/Dept.vue')
      },
      {
        name: 'echarts',
        path: '/system/echarts',
        meta: {
          title: '图表管理'
        },
        component: () => import('@/views/Echarts.vue')
      },
      {
        name: 'leave',
        path: '/audit/leave',
        meta: {
          title: '休假申请'
        },
        component: () => import('@/views/Leave.vue')
      },
      {
        name: 'approve',
        path: '/audit/approve',
        meta: {
          title: '待我审批'
        },
        component: () => import('@/views/Approve.vue')
      }
    ]
  },
  {
    name: 'login',
    path: '/login',
    meta: {
      title: '登录'
    },
    component: () => import('@/views/Login.vue')
  },
  {
    name: '404',
    path: '/404',
    meta: {
      title: '页面不存在'
    },
    component: () => import('@/views/404.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 动态路由
// async function loadAsyncRoutes() {
//   let userInfo = storage.getItem('userInfo') || {}
//   if (userInfo.token) {
//     try {
//       const { menuList } = await API.getPermissionList()
//       let routes = utils.generateRoutes(menuList)
//       routes.map(route => {
//         /**
//          * 1.url必须提取出来
//          * 2.地址需要添加.vue后缀
//          * 3.不可以使用@/views
//          */
//         let url = `./../views/${route.component}.vue`
//         route.component = () => import(url)
//         router.addRoute('home', route)
//       })
//     } catch (error) {
//       console.error(error)
//     }
//   }
// }

// loadAsyncRoutes()

// 判断当前地址是否可以访问
// function checkPermission(path) {
//     let hasPermission = router.getRoutes().filter(route => route.path == path)
//     if (hasPermission) {
//         return true
//     } else {
//         return false
//     }
// }

// 导航守卫
router.beforeEach((to, form, next) => {
  // if (checkPermission(to.path)) { // 方式一
  //     document.title = to.meta.title
  //     next()
  // } else {
  //     next('/404')
  // }
  if (router.hasRoute(to.name)) { // 方式二
    document.title = to.meta.title
    next()
  } else {
    next('/404')
  }
})

export default router
